<template>
  <!-- 组件根标签 -->
  <div class="findfind">
    <!-- <h3>我是find</h3> -->
    <van-nav-bar>
      <template #title>
        <h4>发现</h4>
      </template>
    </van-nav-bar>
    <!-- 下拉刷新框 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="main">
        <!-- 1.面试技巧 -->
        <div class="faceskill">
          <!-- 单元格 -->
          <cellvue title="面试技巧"></cellvue>
          <!-- 数据们 -->
          <div class="items">
            <faceitem
              :item="item"
              v-for="(item, index) in faceTechnic"
              :key="index"
            ></faceitem>
          </div>
        </div>

        <!-- 2.市场数据 -->
        <div class="shichang">
          <!-- 单元格 -->
          <cellvue title="市场数据" @more="$router.push('/market')"></cellvue>
          <div class="area_">
            <span>{{ shichangdata.city }}</span>
            <span>{{ shichangdata.position }}</span>
          </div>
          <div class="main2">
            <div class="shichangitems">
              <shichangitem
                :item="item"
                :tosalary="tosalary"
                :data="shichangdata"
                v-for="(item, index) in show_hotStates"
                :key="index"
              ></shichangitem>
            </div>
            <div class="showmore">
              <span @click="showMore" v-if="jiantouShow"
                >展示更多 <i class="iconfont iconicon_zhankai jiantou"></i
              ></span>
              <span @click="backMore" v-else class="more"
                >收起更多 <i class="iconfont iconicon_zhankai jiantou2"></i
              ></span>
            </div>
          </div>
        </div>
        <!-- 3.面试分享 -->
        <div class="shareface">
          <!-- 单元格 -->
          <cellvue
            title="面试分享"
            @more="$router.push('/shareList')"
          ></cellvue>

          <div class="main3">
            <div class="shareitems">
              <shareItem
                @xiangqingshare="$router.push(`/xiangqingshare/${item.id}`)"
                :item="item"
                v-for="(item, index) in shareDatas"
                :key="index"
              ></shareItem>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import cellvue from './cellvue'
import faceitem from './faceitem'
import shichangitem from '@/views/home/find/shichangitem'
import shareItem from '@/views/home/find/shareItem'
import { getTechnic, getHotdatas, getSharedatas } from './../../../api/article'
export default {
  name: 'findfind',
  data () {
    return {
      jiantouShow: true, // 箭头的改变
      // 面试技巧的数据
      faceTechnic: '',
      // 1.市场数据
      hotStates: '',
      // 2.真正渲染的市场数据
      show_hotStates: '',
      // 3.最高的工资
      tosalary: '',
      // 市场数据
      shichangdata: '',
      // 面经分享数据
      shareDatas: '',
      // 下拉刷新的状态
      isLoading: false
    }
  },
  // 生命钩子 -- 页面一跳转进来,就发送请求获得数据
  created () {
    // 调用获得整个页面的数据的方法
    this.getAlldata()
  },

  // 进入并打开被缓存的页面中执行的钩子函数,
  activated () {
    // 取出之前保存的滚动距离,并且让页面滚动到对应的位置
    window.scrollTo(0, this.$route.meta.scrollTop)
  },

  methods: {
    // 0.获取整个页面的数据的方法
    async getAlldata () {
      // 发送获取面试技巧数据
      const res = await getTechnic({
        limit: 3
      })
      // console.log(res.data.data.list)
      this.faceTechnic = res.data.data.list

      // 发送获取市场热门数据请求
      const res2 = await getHotdatas()
      // 真正完整的市场数据数组
      console.log(res2)
      this.shichangdata = res2.data.data
      this.tosalary = res2.data.data.topSalary
      this.hotStates = res2.data.data.yearSalary.reverse()
      // console.log(this.hotStates.reverse())
      // 需要显示的市场数据的数组 -- 先展示三条.slice方法截取数组
      this.show_hotStates = res2.data.data.yearSalary.slice(0, 3)
      // console.log(this.show_hotStates)

      // 发送面经分享请求接口
      const res3 = await getSharedatas({
        limit: 3
      })
      // console.log(res3)
      this.shareDatas = res3.data.data.list

      // 获取完数据之后,将下拉框的状态改变
      this.isLoading = false
    },

    // 1.点击展示更多箭头
    showMore () {
      this.jiantouShow = false
      this.show_hotStates = this.hotStates
    },
    //  2.点击收起更多箭头
    backMore () {
      this.jiantouShow = true
      this.show_hotStates = this.hotStates.slice(0, 3)
    },

    // 3.下拉刷新框触发的事件
    onRefresh () {
      // 重新获取整个页面的数据
      this.getAlldata()
    }
  },
  components: {
    cellvue,
    faceitem,
    shichangitem,
    shareItem
  }
}
</script>
<style lang="less" scoped>
.findfind {
  // height: 100vh;
  .main {
    margin-bottom: 50px;
    .faceskill {
      .items {
        padding: 15px;
      }
    }
    .shichang {
      margin-bottom: 10px;
      .area_ {
        padding: 0 15px;
        span {
          display: inline-block;

          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #545671;
          line-height: 20px;
          background: #eceaea;
          border-radius: 4px;
          margin-right: 5px;
        }
      }
      .main2 {
        padding: 0px 15px;

        .showmore {
          font-size: 14px;
          text-align: center;
          color: #545671;
          .more {
            .jiantou2 {
              display: inline-block;
              transform: rotate(180deg);
            }
          }
        }
      }
    }
    .shareface {
      .main3 {
        padding: 15px;
      }
    }
  }
}
</style>
